<template>
	<view class="home-body">
		<view class="top">
			<input type="text" placeholder="搜索" @click="sousuo">
		</view>
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="imginfo" :current="current" :mode="mode"
			:dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in imginfo" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">

						<img :src="item.imgUrl" alt="" class='swiperimg'>

					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<uni-grid :column="4" class='tuij'>
			<uni-grid-item>

				<img src="../../static/images/icon/newProd.png" alt="" @click='newstui'>

				<p class="text" @click='newstui'>新品推荐</p>
			</uni-grid-item>
			<uni-grid-item>
				<img src="../../static/images/icon/timePrice.png" alt="" @click='hui'>
				<p class="text" @click='hui'>限时特惠</p>
			</uni-grid-item>
			<uni-grid-item>


				<img src="../../static/images/icon/neweveryday.png" alt="" @click='dayqiang'>
				<p class="text" @click='dayqiang'>每日疯抢</p>
			</uni-grid-item>
			<uni-grid-item>


				<img src="../../static/images/icon/newprods.png" alt="" @click='hui'>
				<p class="text" @click='hui'>领优惠卷</p>
			</uni-grid-item>
		</uni-grid>
		<view class='message-play' bindtap='onNewsPage'>
			<image src='../../static/images/icon/horn.png' class='hornpng'></image>
			<swiper vertical='true' autoplay='true' duration='1000' class='swiper-cont'>
				<block v-for="(item,index) in list.records" key='index'>
					<swiper-item class="items" @click="gong">{{item.title}}</swiper-item>
				</block>
			</swiper>
			<text class='arrow'></text>
		</view>

		</uni-grid-item>
		</uni-grid>


		<!-- 每日上新 -->
		<view class="home-list">
			<view class="home-se"></view>
			<p>
				<span class="span1">每日上新</span>
				<span class="span2">查看更多</span>
			</p>

			<view class="home-list-view">
				<dl v-for="(item,index) in list1" :key="index" @click="xq(index)">
					<dt><img :src="item.pic" alt=""></dt>
					<dd class="home-list-name">{{item.prodName}}</dd>
					<dd class="home-list-price">￥{{item.price}}</dd>
				</dl>
			</view>
		</view>
 <!--   商品热卖 -->
        <view class="remai">
        	<p class="moreP"><span>商品热卖</span></p>
			<view class="hotbox">
				<dl v-for="(item,index) in hotlist"  @click="xiangqing2(index)">
					<dt><img :src="item.pic" alt=""></dt>
					<dd>
						<p class='yichu'>{{item.prodName}}</p>
						<p class='brief' >{{item.brief}}</p>
							<p class='price'> <span>￥{{item.price.toFixed(2)}} </span> <img id="hotcarticon" src="../../icons/cart.png" alt=""></p>
					</dd>
				</dl>
			</view>
		
        </view>
		<!-- 更多宝贝 -->
		<view class="morebox">
			<p class="moreP"><span>更多宝贝</span></p>

			<dl v-for="(item,index) in morelist" key='index' @click="xiangqing(index)">
				<dt>
					<img :src="item.pic" alt="">
				</dt>
				<dd>
					<p class="prodName">
						{{item.prodName}}
					</p>
					<p class="brief">
						{{item.brief}}
					</p>
					<p class="price">
						<span>￥{{item.price}}</span>
						<img class="carticon" src="../../icons/cart.png" alt="">
					</p>
				</dd>
			</dl>
		</view>

	</view>


</template>

<script>
	import {getnew} from '../../api/index.js'
	export default {
		components: {},
		data() {
			return {
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],

				imginfo: [],
				list: [],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0,
hotlist:[], //热门
				list1: [],
				morelist: [], //更多宝贝
				id: 0,
				swiper: [],
			}
		},
		onLoad() {},

		mounted() {
			uni.request({
				url: 'http://111.67.198.176:8112/indexImgs',
				method: 'GET',
				data: {
					text: 'uni.request'
				},
				header: {
					'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					this.imginfo = res.data
					this.text = 'request success';
				}
			});
			uni.request({
				url: 'http://111.67.198.176:8112/shop/notice/noticeList',
				method: 'GET',
				data: {
					text: 'uni.request'
				},
				header: {
					'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					this.list = res.data
					this.text = 'request success';
				}
			});
			// 更多宝贝
			uni.request({
				url: 'http://111.67.198.176:8112/prod/prodListByTagId?tagId=3&size=6',
				method: 'GET',
				data: {
					text: 'uni.request'
				},
				header: {
					'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					this.morelist = res.data.records
					this.id = res.data.records[0].prodId
					console.log(this.id, '00000000000000000')
					console.log(this.morelist, '--------------')
					this.text = 'request success';
				}
			});
              //热卖数据
            getnew().then(res=>{
				this.hotlist=res.data.records
				console.log(this.hotlist,'//////////////');
			})
			//每日上新数据
			uni.request({

				url: 'http://111.67.198.176:8112/prod/tagProdList',
				method: 'GET',
				data: {
					text: 'uni.request'
				},
				header: {
					'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					this.list1 = res.data[2].productDtoList
					this.text = 'request success';
				},

			});
		},



		onLoad() {},
	
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			//热卖跳详情
            xiangqing2(index) {
		  	uni.navigateTo({
		  			url: '/pages/xiangqing/xiangqing?index=' + this.hotlist[index].prodId,
		  		})
		  	},
			newstui() {
				uni.navigateTo({
					url: '/pages/new/new'
				})
			},
			dayqiang() {
				uni.navigateTo({
					url: '/pages/qiang/qiang'
				})
			},
			hui() {
				uni.showToast({
					icon: "none",
					title: "该功能未开源"
				})
			},
			gong() {
				uni.navigateTo({
					url: '/pages/gong/gong'
				})
			},

			xiangqing(index) {
				uni.navigateTo({
					url: '/pages/xiangqing/xiangqing?index=' + this.morelist[index].prodId,
				})
			},

			sousuo() {
				console.log('跳搜索')
				uni.navigateTo({
						url: '/pages/search/search'
					}

				)
			},

			xq(index) {
				console.log(index);
				console.log(this.list[index].prodId);

				uni.navigateTo({
						url: '/pages/xq/xq?index=' + this.list[index].prodId
					}

				)
			},
		},
	}


</script>
<style lang="scss" scoped>
	.swiper-box {
		height: 150px;
	}
	.swiperimg{
		width: 100%;
		height: 100%;
		margin-top: -84px;
	}
	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 150px;
		color: #fff;
	}

	.image {
		width: 100%;
		height: 100%;
	}


	.tuij {
		display: flex;
		text-align: center;
		justify-content: space-around;

		img {
			width: 30px;
			height: 30px;
		}

		p {
			font-size: 12px;
		}
	}



	.tuij {
		margin: 20px 0px;
		display: flex;
		text-align: center;
		justify-content: space-around;
		margin-top: 10px;
		img {
			width: 30px;
			height: 30px;
		}

		p {
			font-size: 12px;
		}
	}

	.swiper {
		width: 100%;
		height: 150rpx;
	}

	.swiper-item {
		padding: 100rpx 20rpx;
	}



	// 更多宝贝
	.morebox {
		width: 100%;
		background: #fff;
		margin-top: 40px;

		.moreP span {
			margin-left: 10px;
		}

		dl {
			width: 100%;
			height: 123px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20px;
			border-top: 1px solid #eee;

			dt {
				width: 106px;
				height: 106px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			dd {
				width: 186px;
				height: 106px;
				margin-left: 10px;

				.prodName {
					font-size: 11px;
					margin-top: 10px;
				}

				.brief {
					font-size: 9px;
					color: #999999;
					margin-top: 15px;
				}

				.price {
					span {
						font-size: 11px;
						color: #eb2444;
						float: left;
					}

					margin-top: 15px;

					img {
						width: 20px;
						height: 20px;
						float: right;
						margin-right: 10px;
					}
				}
			}
		}
	}

	// 公告
	.message-play {
		font-size: 12px;
		position: relative;
		height: 90rpx;
		background: #fff;
		margin: auto;
		padding: 0 60rpx 0 100rpx;
		box-sizing: border-box;
		box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
		border: 2rpx solid #fafafa;
	}

	.message-play .hornpng {
		width: 77rpx;
		height: 36rpx;
		position: absolute;
		left: 20rpx;
		top: 27rpx;
		margin-right: 8rpx;
	}

	.message-play .swiper-cont {
		height: 90rpx;
		line-height: 90rpx;
	}

	.message-play .swiper-cont .items {
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: left;
	}

	.arrow {
		width: 15rpx;
		height: 15rpx;
		border-top: 3rpx solid #686868;
		border-right: 3rpx solid #686868;
		transform: rotate(45deg);
		position: absolute;
		right: 30rpx;
		top: 34rpx;
	}

	.home-body {
		width: 100%;
		overflow: auto;

		//头部搜索
		.top {

			width: 100%;
			border-bottom: 1px solid #ccc;

			input {
				width: 270px;
				height: 20px;
				border: solid 1px #ccc;
				margin-top: 10px;
				margin-left: 30px;
				border-radius: 20px;
				text-align: center;
				margin-bottom: 10px;
			}
		}





		//渲染数据
		.home-list {
			width: 100%;
			// height: 300px;
			// background: #ccc;
			position: relative;


			.home-se {
				width: 100%;
				height: 100px;
				background: lightskyblue;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}

			.span1 {
				font-size: 14px;
				margin-left: 20px;
				margin-top: 10px;
				margin-right: 150px;
				display: inline-block;
				color: #fff;
			}

			.span2 {
				font-size: 14px;
				margin-top: 10px;
				display: inline-block;
				color: #fff;
				width: 80px;
				height: 20px;
				background: #ccc;
				border-radius: 20px;
				text-align: center;
			}

			.home-list-view {
				width: 100%;
				// height: 480px;
				// background: #ccc;
				margin-top: 20px;
				clear: both;


				dl {
					float: left;
					width: 90px;
					margin-left: 12px;
					margin-bottom: 20px;
					padding-bottom: 10px;
					box-shadow: 2px 2px 3px #aaaaaa;
					height: 150px;
					border-radius: 10px;

					img {
						border-radius: 10px 10px 0 0;
					}


					.home-list-name {
						width: 70px;
						overflow: auto;
						height: 30px;
						font-size: 10px;
						text-align: center;
					}

					.home-list-price {
						margin-top: 10px;
						color: red;
						font-size: 13px;
					}

					dt {

						img {
							width: 90px;
							height: 90px;
						}
					}
				}

			}
		}

	}
	.remai{
		width: 100%;
		height: 520px;
		overflow: hidden;
		.price{
			color: red;
			display: flex;
			justify-content: space-between;
			#hotcarticon {
				width: 20px;
				height: 20px;
				float: right;
				margin-right: 10px;
			}
		}
		.brief{
			width: 100%;
			 overflow: hidden;  
			    white-space: nowrap;  
			    text-overflow: ellipsis; 
			font-size: 12px;
			color: #999999;
		}
		.hotbox{
			display: flex;
		    justify-content: space-around;
			flex-wrap: wrap;
			dl{
				width: 45%;
				height: 230px;
				margin-top: 15px;
				box-shadow: 2px 2px 3px #aaaaaa;
				img{
					width: 100%;
					height: 150px;
				}
			}
		}
		.yichu{
			width: 100%;
			 overflow: hidden;  
			    white-space: nowrap;  
			    text-overflow: ellipsis; 
		
		}
	}
</style>
